<!-- 赛事信息界面 -->
<template>
    <div
      class="
        venue-display
        flex flex-direction
        strut-absolute
        padding-top-xl padding-lr-xl padding-bottom-xs
      "
      style="overflow-y: scroll; overflow-x: hidden; height: 100%"
    >
    <span style="margin-top:-1%;height: 80px;">
      <el-form inline="inline">
        <el-form-item label="赛事板块">
            <el-select v-model="speciesId" @change="getContestList">
                <el-option v-for="item in speciesList"
                :key="item.id" :label="item.name" :value="item.id"
                >
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="赛事名称">
            <el-select v-model="contestId" @change="getContestList">
                <el-option v-for="item in contestList"
                :key="item.id" :label="item.name" :value="item.id"
                >
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item style="margin-left:20px">
            <el-button type="primary" @click="search">查询</el-button>
            <el-button type="primary" @click="openDialog">发布公告</el-button>
        </el-form-item>
      <el-form-item style="margin-left:20px">
            
      </el-form-item>
    </el-form>
    </span>  
    <br>
      <el-table
      :show-header="false"
      :data="data">
      <el-table-column >
        <template slot-scope="scope">
          <el-container>
          <el-main style="width: 90%;">
          <el-form>
            <el-form inline="inline">
              <el-form-item style="width: 40%;">
              <span style="font-size:24px">
                {{ scope.row.title }}
              </span>
            </el-form-item>
            <el-form-item label="最后修改时间" style="float:right">
              {{ scope.row.updateTime }}
            </el-form-item>
            </el-form>
            <div class="horizontal_line" style="width:100%"/>
            <el-form-item label="内容:">
              {{ scope.row.context }}
            </el-form-item>
          </el-form>
        </el-main>
        <el-aside style="width: 20%;">
          <el-button style="margin-top: 20px;margin-left: 10%;margin-bottom: 20px;"
          type="primary" icon="el-icon-edit" 
          @click="openEditDialog(scope.row)"
          >
          修改
        </el-button>
        <el-button type="danger" icon="el-icon-delete" 
          @click="deleteContestNotice(scope.row.id)"
          >
          删除
        </el-button>
        </el-aside>
        </el-container>
        </template>
      </el-table-column>
      </el-table>
  
      <el-dialog
      style="width: 50%;margin-left: 30%;"
      :visible.sync="dialogVisible">
      <el-form label-width="70px" :model="noticeParams">
        <el-form-item label="公告标题">
          <el-input v-model="noticeParams.title"></el-input>
        </el-form-item>
        <el-form-item label="公告内容" class="el_inner_textarea1">
          <el-input 
          type="textarea" v-model="noticeParams.context"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
          style="width: 40%;"
          @click.native.prevent="cancelDialog"
          >取 消</el-button
        >
          <el-button
          type="primary"
          style="width: 40%; margin-left: 20%;"
          @click.native.prevent="addContestNotice"
          >确 定</el-button
        >
        </el-form-item>
      </el-form>
      </el-dialog>
  
      <el-dialog
      style="width: 50%;margin-left: 30%;"
      :visible.sync="editDialogVisible">
      <el-form label-width="70px" :model="editNoticeParams">
        <el-form-item label="公告标题">
          <el-input 
           v-model="editNoticeParams.title"></el-input>
        </el-form-item>
        <el-form-item label="公告内容">
          <el-input 
          type="textarea" v-model="editNoticeParams.context"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
          style="width: 40%;"
          @click.native.prevent="cancelEditDialog"
          >取 消</el-button
        >
          <el-button
          type="primary"
          style="width: 40%; margin-left: 20%;"
          @click.native.prevent="editContestNotice"
          >确 定</el-button
        >
        </el-form-item>
      </el-form>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import CustomForm from '@/components/CustomForm'
  import { addContestNotice,getContestList, getContestNoticeList,editContestNotice ,deleteContestNotice,getContestSpeciesList} from '@/api/eventSection';
  export default {
    data() {
      return {
        data: [],
        speciesList:[],
        contestList:[],
        speciesId:"",
        contestId:"",
        noticeParams:{
            contestId: '',
            title: '',
            context:''
        },
        editNoticeParams:{
          id:'',
          contestId:'',
          title:'',
          context:''
        },
        dialogVisible: false,
        editDialogVisible: false,
        searchParams:{
            status:"",
            contestSpeciesId:""
        },
      }
    },
  
    mounted() {
        // 获取赛事板块列表
        this.init();

    },
    methods: {
        search() {
            this.getContestList();
        },
        init() {
            this.getContestSpeciesList();
        },
        getContestList() {
            this.searchParams.status = 0;
            this.searchParams.contestSpeciesId = this.speciesId;
            getContestList(this.searchParams).then(res => {
                if(res.data.code === 200){
                this.contestList = res.data.data
                this.contestId = this.contestList[0].id
                this.getContestNoticeList();
                }else {
                this.$message({
                    message: res.data.msg,
                    type: 'error'
                })
                }  
            })
        },
        getContestSpeciesList() {
            getContestSpeciesList().then(res => {
                if(res.data.code === 200){
                this.speciesList = res.data.data
                this.speciesId = this.speciesList[0].id;
                this.getContestList(); 
                }else {
                this.$message({
                    message: res.data.msg,
                    type: 'error'
                })
                }        
            })
    },
      cancelEditDialog(){
        this.getContestNoticeList()
        this.editDialogVisible = false
      },
      openEditDialog(row){
        this.editDialogVisible = true
        this.editNoticeParams = {...row}
      },
      openDialog(){
        this.dialogVisible = true
      },
      cancelDialog(){
        this.dialogVisible = false
      },
      addContestNotice(){
        this.noticeParams.contestId = this.contestId;
        addContestNotice(this.noticeParams).then(res =>{
          if(res.data.code === 200){
            this.$message({
              message: res.data.msg,
              type:'success'
            })
            this.dialogVisible = false
            this.getContestNoticeList()
          }else{
            this.$message({
              message: res.data.msg,
              type:'error'
            })
          }
        })
      },
      getContestNoticeList(){
        getContestNoticeList({contestId :this.contestId}).then(res =>{
          if(res.data.code === 200){
            this.data = res.data.data
          }else {
            this.$message({
              message: res.data.msg,
              type:'error'
            })
          }
        })
      },
      editContestNotice(){ 
        editContestNotice(this.editNoticeParams).then(res =>{
          if(res.data.code === 200){
            this.$message({
              message:res.data.msg,
              type:'success'
            })
            this.editDialogVisible = false
            this.getContestNoticeList()
          }else{
            this.$message({
              message: res.data.msg,
              type:'error'
            })
          }
        })
      },
      deleteContestNotice(contestNoticeId){
        deleteContestNotice({contestNoticeId:contestNoticeId}).then(res => {
          if(res.data.code === 200){
            this.$message({
              message:res.data.msg,
              type:'success'
            })
            this.getContestNoticeList()
          }else{
            this.message({
              message:res.data.msg,
              type:'error'
            })
          }
        })
      }
    },
  
    destroyed() {
      // clearInterval(this.timer)
    },
    components: {
      CustomForm
    }
  }
  </script>
  <style scoped>
  /* ::v-deep .el-input__inner{
    width: 70%;
  } */
  .inputHeight >>> .el-input__inner{
    height:120%
  }

.horizontal_line{
  /* 横线 */
  float: right;
    width: 79.5%;
    height: 0.0625rem;
    margin-top: -0.5em;
    background: #d4c4c4;
    position: absolute;
    text-align: center;
    margin-left: -3%;
}
.vertical_line{
/* 竖线 */
  float: left;
  width: 0.1em;
  height:200px;
  margin-right: 1em;
  margin-left: 3.5em;
  background:#d4c4c4;
  /* background:red; */
}

/* ::v-deep .el-table td {
   border-bottom: none;
 }  */
 ::v-deep .tableStyle::before{
  width: 0;
}
::v-deep .el-table{
  border: 1px solid #ccc;
}
::v-deep .el-table th.is-leaf {

border-bottom: none;
}

.el_inner_textarea1 >>> .el-textarea__inner{
  height:200px
}
  </style>
  